<template>
    <div class="time-walker">
        <strong style="font-size: 14px;">{{ timeString }}</strong>
       <div style="font-size: 10px;">{{ dateString }}</div>
    </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';

const dateString = ref<string>('');
const timeString = ref<string>('');

let timePiece: string | number | NodeJS.Timeout | undefined;
onMounted(() => {
    const date = dayjs(new Date).format('YYYY-MM-DD');
    dateString.value = date.slice(0, 4)+'年'+date.slice(5, 7)+'月'+date.slice(8, 11)+'日';
    timePiece = setInterval(() => {
        timeString.value = dayjs(new Date).format('HH:mm:ss');
    }, 1000);
});
onUnmounted(() => {
    clearInterval(timePiece);
});
</script>

<style lang="less" scoped>
.time-walker {
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>